<template>
  <view class="mapBox">
    <mineNavbar :styleData="styleData"></mineNavbar>
    <view class="content">
      <map id="map" :longitude="longitude" :latitude="latitude" :markers="markers" class="map" :show-location="true" />
    </view>
    <view class="storeList">
      <view v-for="item in storeArr" :key="item.storeId">
        <view class="left" @click="handleOpenMap(item)">
          <view class="top">
            <text>{{ item.cityLabel || '' }}{{ item.areaLabel || '' }}{{ item.storeName || '' }}</text>
            <text>{{ item.state ? '已绑定' : '' }}</text>
          </view>
          <view class="bottom">{{ item.provinceLabel || '' }}省{{ item.cityLabel || '' }}市{{ item.areaLabel || '' }}区{{
            item.detailedAddress || '' }}</view>
        </view>
        <view class="right" @click="handlePhone(item)">
          <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/10/59e9931d11974769ba70dfabd6addec6.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getStoreList } from "@/api/pages/home";

export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "门店地图",
      },
      latitude: null,
      longitude: null,
      storeArr: [],
      markers: [],
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) { },
  async onShow() {
    let that = this;
    uni.getLocation({
      type: "wgs84",
      success: function (res) {
        const { errMsg, longitude, latitude } = res;
        if (errMsg == "getLocation:ok") {
          console.log(latitude, "latitude");
          that.latitude = latitude;
          that.longitude = longitude;
          getStoreList({
            longitude,
            latitude,
          }).then((res) => {
            if (res.code == 200) {
              that.storeArr = res.data;
              console.log(res, "获取门店数据====");
              that.addMarkers();
            }
          });
          console.log(this.longitude, "longitude");
        }
      },
    });
  },
  mounted() { },
  onReady() {
    this._mapContext = uni.createMapContext("map", this);

    // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
    this._mapContext.initMarkerCluster({
      enableDefaultStyle: false,
      zoomOnClick: true,
      gridSize: 60,
      complete(res) {
        console.log("initMarkerCluster", res);
      },
    });

    this._mapContext.on("markerClusterCreate", (e) => {
      console.log("markerClusterCreate", e);
    });
  },
  methods: {
    addMarkers() {
      let markersList = []
      this.storeArr.forEach((p, i) => {
        console.log(i);
        markersList.push(
          Object.assign(
            {},
            {
              id: i + 1,
              iconPath:
                "http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/10/dfe5501b552a4c0bbeb6961817865f94.png",
              width: 15,
              height: 20,
              latitude: Number(p.latitude),
              longitude: Number(p.longitude),
              // joinCluster: true, // 指定了该参数才会参与聚合
              label: {
                width: 200,
                height: 50,
                borderWidth: 1,
                borderRadius: 10,
                bgColor: "#ffffff",
                content: p.provinceLabel + '省' + p.cityLabel + '市' + p.areaLabel + '区' + p.detailedAddress,
              },
            },
          )
        );
      });
      this.markers = markersList
      console.log(this.markers, 666);
      this._mapContext.addMarkers({
        markers: this.markers,
        clear: false,
        complete(res) {
          console.log("addMarkers", res);
        },
      });
    },
    // 拨打电话
    handlePhone(item) {
      uni.showActionSheet({
        title: "拨打电话",
        itemList: [item.contactPhone],
        success: function (res) {
          console.log(res);
          if (!res.cancel && res.tapIndex !== undefined) {
            uni.makePhoneCall({
              phoneNumber: item.contactPhone,
            });
          }
        },
      });
    },
    // 打开手机安装的地图app
    handleOpenMap(res) {
      uni.openLocation({
        latitude: Number(res.latitude),
        longitude: Number(res.longitude),
        name: res.detailedAddress,
        address: res.detailedAddress,
        scale: 18,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.mapBox {
  width: 100%;

  .content {
    width: 100%;
    height: 838rpx;

    .map {
      width: 100%;
      height: 100%;
    }
  }

  .storeList {
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50rpx;

    >view {
      width: 702rpx;
      height: 140rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        .top {
          display: flex;
          align-items: center;

          >text:first-child {
            font-size: 32rpx;
            color: #000000e0;
            margin-right: 10rpx;
          }

          >text:last-child {
            font-size: 18rpx;
            color: #000000a3;
          }
        }

        .bottom {
          font-weight: 400;
          font-size: 24rpx;
          color: #00000073;
          margin-top: 10rpx;
        }
      }

      .right {
        image {
          width: 72rpx;
          height: 48rpx;
        }
      }
    }
  }
}
</style>
